<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // Generator 生成器
        // 生成的是遍历器的接口 Iterator

        // 1. 生成器两个关键要素，函数后面带*号，内部使用 yield 枚举值
        function* getNum() {
            for (let i = 6; i < 12; i++) {
                yield i;
            }
        }

        const result = getNum();
        // console.log(result); // suspended  暂停状态

        // 生成了一个可遍历对象 Iterable, 意味着可以调用 next()
        // console.log(result.next());
        // do {
        //     var item = result.next();
        //     if (item && item.value !== undefined) {
        //         console.log(item);
        //         console.log(item.value);
        //     }
        // } while (!item.done)

        // 可以调用 for...of 枚举
        // for (const item of result) {
        //     console.log(item);
        // }

        // 2. 给对象实现可遍历对象的功能
        // Symbol.iterator 属性是自带的
        const obj = {
            a: 10,
            b: 20,
            c: 30,
            [Symbol.iterator]: function* () {
                // 需要生成器，返回一个可遍历的数据
                for (const key in obj) {
                    yield obj[key];
                }
            },
            keys: function* () {
                for (const key in obj) {
                    yield obj[key];
                }
            }
        }

        // 利用 Symbol.iterator 属性，生成一个可以 for...of 的遍历器函数
        // 但是这种方式并没有产生可遍历对象
        // for (const item of obj) {
        //     console.log(item);
        // }

        const attr = obj.keys();
        // console.log(attr.next());
        // for (const item of attr) {
        //     console.log(item);
        // }

    </script>
</body>

</html>